import React, { Component } from "react"

export class App extends Component {
    constructor() {
        super()
        this.state = {
            message: "今天天气真不错",
            counter: 0,
        }
    }

    changeMessage() {
        // 1.setState更多用法
        // 1.基本使用
        // this.setState({message: "今天不太好"})

        // 2.setState可以传入一个回调函数
        // 可以编写一些新的state的逻辑
        //  当前回调函数可以将state和props传递进来
        // this.setState(()=>{
        //     return {
        //         message: "今天天气不太好"
        //     }
        // })

        // 3.setState 在React的事件处理中是一个异步调用
        // 如果希望在数据更新之后（数据合并），获取到对应的结果执行一些逻辑代码
        // 那么可以在setState中传入第二个参数：callback
        this.setState({ message: "今天天气不太好" }, () => {
            console.log("+++++++++++++++", this.state.message)
        })

        console.log("-----------", this.state.message)
    }

    render() {
        const { message, counter } = this.state
        return (
            <div>
                <button onClick={this.changeMessage.bind(this)}>change message</button>
                <div>message:{message}</div>
                <div>counter:{counter}</div>
            </div>
        )
    }
}

export default App
